<template>
    <div id="dept_list">
        <ListPage>
            <template #filter>
                <el-form ref="form" :model="searchForm" inline label-width="80px">
                    <el-form-item label="">
                        <el-input v-model="searchForm.name" placeholder="部门名称" clearable
                            style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="searchForm.state" placeholder="请选择状态" clearable>
                            <el-option label="正常" value="0"></el-option>
                            <el-option label="停用" value="-1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="subSearchForm">搜索</el-button>
                        <el-button size="small">重置</el-button>
                    </el-form-item>
                </el-form>
            </template>

            <template #operate>
                <el-button type="success" size="small" @click="newVisable = true">
                    创建部门
                </el-button>
            </template>

            <template #table>
                <el-table :data="tableData" v-loading="loading" style="width: 100%">
                    <el-table-column type="index" label="序号" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column prop="info" label="描述">
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="140">
                        <template v-slot="scope">
                            <el-tag v-if="scope.row.state == '0'" type="success" style="font-size: 14px;">
                                正常</el-tag>
                            <el-tag v-else type="danger" style="font-size: 14px;">
                                停用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" fixed="right">
                        <template v-slot="scope">
                            <el-button type="success" size="small" @click="edit(scope.row)">
                                修改</el-button>
                            <el-button type="danger" size="small" @click="forbidden(scope.row.id)">
                                停用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template #pagination>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="searchForm.currentPage" :page-sizes="[10, 20, 50]"
                    :page-size="1" layout="total,sizes, prev, pager, next,jumper"
                    :total="100">
                </el-pagination>
            </template>
        </ListPage>

        <!--修改描述/状态弹出框-->
        <el-dialog title="部门修改" :visible.sync="dialogVisible" width="20%">
            <el-form v-model="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称：">
                    <el-input disabled v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input type="text" v-model="editForm.info"></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select v-model="editForm.state" clearable @change="$forceUpdate()" placeholder="请选择状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="submitEditForm">
                        提交</el-button>
                    <el-button size="small" @click="canCelEdit">
                        关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--创建弹出框-->
        <el-dialog title="创建部门" :visible.sync="newVisable" width="20%">
            <el-form :model="newForm" :rules="rules" ref="newForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称：" prop="name">
                    <el-input v-model="newForm.name"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input type="text" v-model="newForm.info"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="submitNewForm('newForm')">提交</el-button>
                    <el-button size="small" @click="resetNewForm('newForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { popup } from "@/assets/js/common";
import { deactivate, listByQo, save, update } from "@/api/personnel_management/department/deptApi";
import ListPage from "../../../component/list-page.vue"

export default {
    components: {
        ListPage
    },
    data() {
        return {
            tableData: [],
            editForm: {},
            editRow: {},
            dialogVisible: false,
            newVisable: false,
            newForm: {},
            searchForm: {},
            options: [
                { label: '正常', value: '0' },
                { label: '停用', value: '-1' }
            ],
            rules: {
                name: [
                    { required: true, message: '名称不能为空', trigger: 'blur' },
                ]
            },
            loading: false,
        }
    },
    methods: {
        init() {
            this.loading = true;
            listByQo(this.searchForm).then(res => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data
                } else {
                    popup(res.data.msg, "error")
                }

            })
            .finally(() => {
                this.loading = false;
            });
        },
        forbidden(id) {
            deactivate(id).then(res => {
                res = res.data
                if (res.code == 200) {
                    popup("操作成功")
                } else {
                    popup(res.msg, "error")
                }
                this.init()
            })
        },

        /*弹出修改表单*/
        edit(row) {
            this.editForm = { ...row }
            this.dialogVisible = true
        },
        /*条件搜索*/
        subSearchForm() {
            this.init()
        },
        /*对接后端修改接口*/
        submitEditForm() {
            update(this.editForm).then(res => {
                res = res.data
                if (res.code == 200) {
                    popup("操作成功")
                    this.dialogVisible = false
                    this.init()
                } else {
                    popup(res.msg, "error")
                }
            })
        },
        /*修改重置按钮*/
        canCelEdit() {
            this.dialogVisible = false
            this.editForm = {}
        },
        /*创建新角色*/
        submitNewForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.newForm)
                    save(this.newForm).then(res => {
                        res = res.data
                        if (res.code == 200) {
                            popup("操作成功")
                            this.newVisable = false
                            this.newForm = {}
                            this.init()
                        } else {
                            popup(res.msg, "error")
                        }
                    })
                }
            });
        },
        resetNewForm(formname) {
            this.$refs[formname].resetFields()
        },
    },
    created() {
        this.init()
    }

}
</script>
<style>
.search {
    display: inline-block;
    margin: 0 auto;
    height: 51px;
    line-height: 51px;
}

.search .column {
    display: inline-block;
    margin: 0 auto;
    margin-right: 2px;
    line-height: 48px;
    height: 51px;
}
</style>